<template>
  <div class="town_top">
    <div class="top_left" style="cursor: pointer;" @click="gohome">
      <div class="HomeStyle">
        <img src="@/assets/images/xctown/回到首页.png" alt="">
        <span>回到首页</span>
      </div>

    </div>
    <h3>汇总分析-{{ $route.query.ENTERPRISENAME }}</h3>
    <div class="top_right">
      <el-select v-model="value" placeholder="请选择" @change="selectTown">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>
<script>
import {
  getQueryBodyByProduce
} from '@/api/dynamicInterface';

export default {
  props: {
    optionList: {
      type: Array,
      default: () => []
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      options: [],
      value: ''
    };
  },
  watch: {
    '$route'(to, from) {
      this.$router.go(0);
    }
  },
  created() {
    this.getTownExecuteRate();
    this.value = this.$route.query.ENTERPRISENAME;
  },
  methods: {
    gohome() {
      this.$router.push('/');
    },
    getTownExecuteRate() {
      getQueryBodyByProduce({
        tableId: 538
      }).then(res => {
        if (res.success) {
          this.options = res.data.map(item => ({ value: item['CENTERPRISENAME1'], label: item['CENTERPRISENAME1'] }));
        }
      });
    },
    selectTown(val) {
      this.goRoute('乡镇分析', val);
    },
    goRoute(tilte, val) {
      this.optionList.forEach(it => {
        if (it.enterpriseName === val) {
          this.menuList.forEach(item => {
            if (item.meta.title === tilte) {
              if (item.children) {
                item.children.forEach(chit => {
                  if (chit.meta.title === tilte) {
                    const params = {
                      path: chit.path,
                      query: {
                        title: chit.meta.title,
                        menuId: chit.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: chit.isHideLeft,
                        isHideTop: chit.isHideTop,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  } else {
                    const params = {
                      path: chit.path,
                      query: {
                        title: item.meta.title,
                        menuId: item.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: item.isHideLeft,
                        isHideTop: item.isHideTop,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  }
                });
              } else {
                const params = {
                  path: item.path,
                  query: {
                    title: item.meta.title,
                    menuId: item.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    ENTERPRISECODE: it.ENTERPRISECODE,
                    ENTERPRISENAME: it.ENTERPRISENAME,
                    FILEID: it.FILEID,
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop,
                    CENTERPRISECODE1: it.CENTERPRISECODE1
                  }
                };
                this.$router.push(params);
              }
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.town_top {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .top_left {
    border: 1px solid #1890ff;
border-radius: 3px;
    padding: px2vw(6px) px2vw(50px);
    img {
      vertical-align: middle;
      width: px2vw(18px);
      height: px2vw(18px);
    }
    span {
     color: #1890ff;
      display: inline-block;
      vertical-align: middle;
      font-size: px2vw(16px);
    }
  }
  h3 {
    color:  #576a95;;
    font-size: px2vw(32px);
    margin: 0;
  }
  .top_right {
    margin-left: (16px);
    width:px2vw(188px);
  }
}
</style>
